import React from 'react'
import { useEffect } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader'
import './index.less'
export default function AreaMap() {
  useEffect(()=>{
    AMapLoader.load({
        key:"fcc9cbc6387d1452d4efea62e79410d1",                     // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:[''],               // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap)=>{
        new AMap.Map("cont",{ //设置地图容器id
            viewMode:"3D",         //是否为3D地图模式
            zoom:10,                //初始化地图级别
            center:[106.54,29.59], //初始化地图中心点位置
        });
    }).catch(e=>{
        console.log(e);
    })
  },[])
  return (
    <>
      <h3>演示了高德地图基本使用流程，没有交互功能</h3>
      <div id='cont'>高德地图加载中...</div>
    </>
  )
}
